<template>
  <div>
    <a-modal v-model:visible="upgradeModal" :title="t['固件升级']" :footer="false">
      <a-form layout="vertical" :model="upgrade">
        <a-form-item :label="t['固件尺寸']" name="modelId">
          <a-select
            v-model="upgrade.modelId"
            :options="librarySizeOptions"
            :placeholder="t['固件尺寸']"
            @change="getVersionList"
          >
          </a-select>
        </a-form-item>

        <a-form-item :label="t['固件版本']" name="version">
          <a-select
            v-model="upgrade.version"
            class="my-3"
            :options="versionList"
            :placeholder="t['固件版本']"
          >
          </a-select>
        </a-form-item>

        <a-button type="primary" :disabled="!upgrade.modelId || !upgrade.version" @click="save">
          {{ t["保存"] }}
        </a-button>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { listFw } from "@/api/service/priceTag/priceTag";

import { upgradeLcdDevice } from "@/api/service/lcd-device/lcd-device";

import { upgradeModal } from "../data/form";
import { keys, librarySizeOptions } from "../data/table";

const t = translate("公共模块");
const versionList = ref();
const upgrade = ref({
  modelId: "",
  version: ""
});
const getVersionList = async () => {
  const data = await listFw(upgrade.value.modelId);
  versionList.value = data.data;
};

const save = async () => {
  await upgradeLcdDevice({
    tags: keys.value,
    firmware: {
      modelId: upgrade.value.modelId,
      version: upgrade.value.version
    }
  });
  upgrade.value = {
    modelId: "",
    version: ""
  };
  upgradeModal.value = false;
};
</script>

<style lang="scss" scoped></style>
